<template>
    <div class="login-wrap">
        <div class="login-main">
            <div class="login-top">
                <div class="login-logo">
                    <img src="../../../assets/images/logo.png">
                </div>
                <div class="login-title">
                    <h1>泰 康 云</h1>
                    <p>专业 ● 打造社区医疗服务第一品牌</p>
                </div>
            </div>
            <div class="login-form">
                <div>
                    <login-form @on-success-valid="handleSubmit" :loading="loading"></login-form>
                </div>
            </div>
        </div>
        <div class="login-bottom">
            <p>© 2019 365dajiankang.com</p>
            <h2>山东泰康云医疗集团</h2>
        </div>
        <ul class="login-animation">
            <li v-for="item in 10" :key="item"></li>
        </ul>
    </div>
</template>

<script>
    import LoginForm from './components/LoginForm';
    import {mapState, mapActions} from 'vuex';

    export default {
        name: 'Login',
        components: {
            LoginForm
        },
        computed: {
            ...mapState({
                /* 加载 */
                loading: state => state.user.loading
            })
        },
        methods: {
            /*  登录 actions */
            ...mapActions(['handleLogin', 'getMenuList']),
            /* 登录方法 */
            handleSubmit({userName, password, code}) {
                this.handleLogin({userName, password, code}).then(res => {
                    this.getMenuList(res).then(() => {
                        this.$router.push({
                            name: 'home'
                        });
                    });
                });
            }
        }
    };
</script>

<style lang="less" scoped>
    @import './index.less';
</style>